<template>
    <ul class="matter-tabs-menu" ref="matterTabsMenu" style="overflow-y: hidden">
        <div class="iconBox iconBoxLeft" v-if="showArrowRight" @click="tabScrollLeft">
            <IconSvg icon-class="jiantou_toright" height="13px"></IconSvg>
        </div>
        <li class="matter-tabs-menu-item" :class="{active: curCategoryId == item.value}"
            @click="changeType(item)" :key="item.value" v-for="item in categoryList">
            {{item.label}}
        </li>
        <!--todo-->
        <div class="iconBox" v-if="showArrowRight" @click="tabScrollRight">
            <IconSvg icon-class="jiantou_toright" height="13px"></IconSvg>
        </div>
    </ul>
</template>

<script>
    import {scrollAnimation} from '@/utils'
    import {getTravelType} from '@/api/info'
    export default {
      name: 'CategoryNav',
      data() {
        return {
          categoryList: [
            {value: 1, label: '南方游'},
            {value: 2, label: '北方游'},
            {value: 3, label: '西藏游'},
            {value: 4, label: '新疆游'},
            {value: 5, label: '海边游'},
            {value: 6, label: '异域风情'}
          ],
          curCategoryId: 1,
          showArrowRight: false,
        }
      },
      mounted() {
        this.getTravelType()
        this.checkShowArrowRight()
      },
      methods: {
        getTravelType() {
          getTravelType().then(res => {
            this.categoryList = Object.keys(res).map(key => {
              return {
                value: key,
                label: res[key]
              }
            })
            this.$emit('change', {type: this.categoryList[0].value})
          })
        },
        changeType(item) {
          this.curCategoryId = item.value
          this.$emit('change', {type: item.value})
        },
        checkShowArrowRight() {
          this.$nextTick(() => {
            let $el = this.$refs.matterTabsMenu
            console.log($el.scrollWidth, $el.clientWidth)
            this.showArrowRight = $el.scrollWidth > $el.clientWidth
          })
        },
        tabScrollLeft() {
          let $el = this.$refs.matterTabsMenu
          if ($el.scrollLeft <= 0) return
          scrollAnimation($el, -100)
          //$el.scrollTo($el.scrollLeft-=50, 0)
        }
      }
    }
</script>

<style lang="scss">
    .matter-tabs-menu {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        display: flex;
        overflow: auto;
        position: relative;
        .matter-tabs-menu-item {
            margin-left: 30px;
            padding: 0 5px;
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            &.active {
                color: #2e89f8;
                border-bottom: 2px solid #2e89f8;
            }
        }
        .iconBox {
            position: fixed;
            right: 0px;
            top: 50px;
            height: 46px;
            padding: 0 10px;
            /*background-color: #fff;*/
            cursor: pointer;
            display: flex;
            align-items: center;
            background-color: #fdf4f4;
        }
        .iconBoxLeft {
            left: 0;
            width: 36px;
            box-sizing: border-box;
            transform: rotate(180deg);
        }
        &::-webkit-scrollbar{
            height: 0;
        }
    }
</style>
